<template>
    <div style="padding:20px">
        <el-card>
            <div slot="header" class="clearfix">
                <span><b>物流线路分析</b></span>
            </div>
            <div class="text item" style="margin-top:15px">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <span class="demonstration">发货地</span>
                            <el-cascader
                                v-model="send"
                                :options="send_options"
                                @change="send_handleChange"
                                size='mini'
                                ></el-cascader>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <span class="demonstration">收货地</span>
                            <el-cascader
                                v-if='send'
                                v-model="receive"
                                :options="receive_options"
                                @change="receive_handleChange"
                                size='mini'
                                ></el-cascader>
                            <el-button size=mini v-else>
                                请先输入发货地
                            </el-button>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            <div class="block">
                                <span class="demonstration">起止日期</span>
                                <el-date-picker
                                v-model="time_range"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="pickerOptions"
                                size='mini'
                                >
                                </el-date-picker>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content bg-purple">
                            &nbsp;
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-button size='mini' @click='search'>查询</el-button>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span=24>
                        <div style="padding:40px 20px 0px 20px">
                            <el-card shadow="never" style='height:100px'>
                                
                            </el-card>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span='13'>
                        <div style="padding:40px 0px 20px 0px">
                            <el-card shadow="never" style='height:500px'>
                                <div slot="header" class="clearfix">
                                    <span><b>地图</b></span>
                                </div>
                                
                                <template v-if="order_list.length > 0">
                                    <baidu-map :center="center" :zoom="zoom" @ready="handler" style="height:1080px" @click="getClickInfo" :scroll-wheel-zoom='true'>
                                    </baidu-map>
                                </template>
                            </el-card>
                        </div>
                    </el-col>
                    <el-col :span='11'>
                        <div style="padding:40px 0px 20px 0px">
                            <el-card shadow="never" style='height:500px'>
                                <div slot="header" class="clearfix">
                                    <span><b>订单列表</b></span>
                                </div>
                                    <el-table
                                        :data="order_list"
                                        height="408"
                                        :border = 'false'
                                        style="width: 100%"
                                        ref="singleTable"
                                        tooltip-effect="dark"
                                        @current-change="handleSelectionChange"
                                        :stripe = 'true'
                                        highlight-current-row
                                        >

                                        <!-- <el-table-column
                                        type="selection"
                                        width="55">
                                        </el-table-column> -->
                                        <el-table-column
                                        prop="order"
                                        label="运单号">
                                        </el-table-column>
                                    </el-table>
                            </el-card>
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col>
                      <div style="padding:20px 0px 0px 0px">
                          <el-card shadow="never" style='height:500px'>
                                <div slot="header" class="clearfix">
                                    <span><b>分析</b></span>
                                </div>
                                <div>
                                  <ve-line :data="chart_data"></ve-line>
                                </div>
                          </el-card>
                      </div>
                  </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

<script>
import {
  region_option_get,
  region_option_post,
  region_order_search_post
} from "../axios_api/api";

export default {
  data() {
    this.extend = {
      'xAxis.0.axisLabel.rotate': 45
    }
    return {
      chart_data:{
          columns: ['时间', '温度', '低温限制', '高温限制'],
          rows: [
            { '时间': '1/1', '温度': 3, '高温限制':8 , '低温限制': 2, '经纬度': 102.13 },
            { '时间': '1/2', '温度': 5, '高温限制':8 , '低温限制': 2, '经纬度': 102.13 },
            { '时间': '1/3', '温度': 4, '高温限制':8 , '低温限制': 2, '经纬度': 102.13 },
            { '时间': '1/4', '温度': 2, '高温限制':8 , '低温限制': 2, '经纬度': 102.13 },
            { '时间': '1/5', '温度': 3, '高温限制':8 , '低温限制': 2, '经纬度': 102.13 },
            { '时间': '1/6', '温度': 5, '高温限制':8 , '低温限制': 2, '经纬度': 102.13 }
          ]
      },
      start_location:'',
      end_location:'',
      center: { lng: 109.45744048529967, lat: 36.49771311230842 },
      zoom: 13,
      show_avg: [],
      checked_order: [],
      order_list: [],
      send: "",
      receive: "",
      time_range: "",
      send_options: [],
      receive_options: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      data_range: ""
    };
  },
  mounted() {
    this.get_region_option();
  },
  methods: {
    handler({ BMap, map }) {
      var point = new BMap.Point(Number(this.start_location[0]),Number(this.start_location[1]));
      map.centerAndZoom(point, 6);
      var marker = new BMap.Marker(point); // 创建标注
      var polyline = new BMap.Polyline([
        new BMap.Point(Number(this.start_location[0]),Number(this.start_location[1]) ),
        new BMap.Point(Number(this.end_location[0]),Number(this.end_location[1]) ),
      ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
    map.addOverlay(polyline);
      map.addOverlay(marker); // 将标注添加到地图中
      var circle = new BMap.Circle(point, 6, {
        strokeColor: "Red",
        strokeWeight: 6,
        strokeOpacity: 1,
        Color: "Red",
        fillColor: "#f03"
      });
      map.addOverlay(circle);
    },
    getClickInfo(e) {
      console.log(e.point.lng);
      console.log(e.point.lat);
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      var rpt = JSON.parse(val.report).log
      var r_json = []
      for(var i=0; i < rpt.length; i++){
        var item = {}
        item['时间'] = rpt[i].time
        item['温度'] = rpt[i].temp
        item['低温限制'] = val.low_temp
        item['高温限制'] = val.high_temp
        r_json.push(item)
      }
      this.chart_data.rows = r_json
    },
    search() {
      console.log("search");
      region_order_search_post({
        start: this.send,
        end: this.receive,
        time_range: this.time_range
      }).then(resp => {
        this.order_list = resp.data;
        console.log(this.order_list);
        this.start_location = this.order_list[0].start_location.split(',')
        console.log(this.start_location)
        this.end_location = this.order_list[0].end_location.split(',')
        console.log(this.end_location)
      });
    },
    receive_handleChange(value) {},
    send_handleChange(value) {
      console.log(value);
      // 请求收货地址清单
      region_option_post({ send: this.send }).then(resp => {
        this.receive_options = resp.data;
      });
      this.receive = "";
    },
    // 请求发货地清单
    get_region_option() {
      region_option_get().then(resp => {
        this.send_options = resp.data;
      });
    }
  }
};
</script>

<style>
.text {
  font-size: 12px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
